<template>
	<view class="">
		<view class="mypic">
			<image src="../../static/images/mypic-bg.jpg" class="mypic-bg"></image>
			<view class="mypic-box">
				<view class="mypic-time">摄于{{show_day}}</view>
				<view class="mypic-top">
					<view class="mypic-name">{{resData.uinfo.nickname}}</view>
					<view class="mypic-phone">{{resData.uinfo.tel}}</view>
				</view>
				<view class="mypic-info">
					<view class="mypic-counter">
						<view class="mypic-counter-p">照片</view>
						<view class="mypic-counter-num"><text class="big">{{num}}</text>张</view>
					</view>
					<view class="service-btn" @click="contactOur">联系客服</view>
				</view>
			</view>
		</view>

		<image :src="resData.offer.cover_img" mode="widthFix" @click="go_iteminfo" :data-id="resData.offer.id"></image>

		<!-- 弹窗 -->
		<view class="mask" v-if="is_getinfo" catchtouchmove="true"></view>

		<view class="popp" v-if="is_getinfo">
			<view class="title">
				<view class="title-bar"></view>
				<view class="title-h">我的美照</view>
				<view class="title-p">My Photos</view>
			</view>
			<view class="entry">
				<view class="entry-p">电话</view>
				<input class="entry-txt" type="number" name="tel" v-model="user_tel"></input>
				<view class="entry-tips">请输入登记的手机号码，<button class="entry-link" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">获取微信手机号</button>
				</view>
			</view>
			<view class="contact-now" @click="relation">立即关联</view>
			<image src="../../static/images/close.png" class="close" @click="close"></image>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				is_getinfo: false,
				resData: [],
				show_day: '00-00-00',
				num: 0,
				user_tel: ''
			}
		},

		/**
		 * 生命周期函数--点击事件集合
		 */
		methods: {
			close() {
				this.is_getinfo = !this.is_getinfo
			},
			get_info() {
				this.$http({
					url: 'Api/User/tiem',
					data: '',
					hideLoading: true,
					success: res => {
						this.resData = res.data
						this.show_day = res.data.offer.show_day
						this.num = res.data.offer.num
						if (res.data.uinfo.tel == '') {
							this.is_getinfo = true
						}
					}
				})
			},
			contactOur() {
				var tel = this.resData.customer
				uni.makePhoneCall({
					phoneNumber: tel
				})
			},
			go_iteminfo(e) {
				var id = e.currentTarget.dataset.id
				uni.navigateTo({
					url: '/pages/works/iteminfo?id=' + id
				})
			},


			getPhoneNumber(e) {
				var that = this
				uni.checkSession({
					success() {
						console.log('session_key未过期')
						if (e.detail.errMsg == 'getPhoneNumber:ok') {
							var post_data = {
								encrypteddata: e.detail.encryptedData,
								iv: e.detail.iv,
								sessionkey: uni.getStorageSync('session_key'),
								user_id: uni.getStorageSync('user_id')
							}

							that.$http({
								url: 'Api/Login/get_wechat_utell',
								data: post_data,
								hideLoading: false,
								success: res => {
									if (res.code == 1) {
										that.user_tel = res.data.tel
									}
								}
							})
						}
					},
					fail() {
						console.log('session_key已过期')
						uni.showModal({
							title: '提示',
							content: '您的授权信息已过期，请重新授权！',
							showCancel: false,
							confirmText: '马上授权',
							success: res => {
								if (res.confirm) {
									uni.navigateTo({
										url: '/pages/login/login?returnUrl=/pages/offer/index'
									});
								}
							}
						})
					}
				})
			},

			relation() {
				let that = this
				var tel = that.user_tel
				if (tel == '') {
					uni.showToast({
						title: '请输入手机号',
						duration: 2000,
						mask: true,
						icon: 'none',
					});
					return;
				}

				var reg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1})|(17[0-9]{1}))+\d{8})$/;
				if (!reg.test(tel)) {
					uni.showToast({
						title: '请输入正确的手机号',
						duration: 2000,
						mask: true,
						icon: 'none',
					});
					return;
				} 
				
				var post_data = {tel:tel}
				that.$http({
					url: 'Api/Login/user_tel_binding',
					data: post_data,
					hideLoading: false,
					success: res => {
						if(res.code == 1){
							uni.showToast({
								title: res.msg,
								duration: 2000,
								mask: true,
							});
							that.resData.uinfo.tel = tel
							that.close()
						}
					}
				})
				
			}


		},

		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad(options) {
			this.get_info()
		},

		/**
		 * 生命周期函数--监听页面初次渲染完成
		 */
		onReady() {

		},

		/**
		 * 页面相关事件处理函数--监听用户下拉动作
		 */
		onPullDownRefresh() {

		},

		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom() {

		},
	}
</script>

<style scoped>
	.mypic {
		margin-bottom: 30rpx;
		position: relative;
	}

	.mypic-bg {
		width: 100%;
		height: 292rpx;
	}

	.mypic-box {
		width: 100%;
		padding: 30rpx;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 9;
	}

	.mypic-time {
		width: 210rpx;
		height: 50rpx;
		text-align: center;
		line-height: 50rpx;
		font-size: 24rpx;
		color: #fff;
		position: absolute;
		top: 0;
		right: 0;
	}

	.mypic-top {
		margin-bottom: 45rpx;
	}

	.mypic-name {
		font-size: 30rpx;
		font-weight: bold;
	}

	.mypic-phone {
		font-size: 28rpx;
	}

	.mypic-info {
		display: flex;
		align-items: center;
	}

	.mypic-counter {
		margin-right: 50rpx;
	}

	.mypic-counter-p {
		font-size: 24rpx;
		color: #808080;
	}

	.mypic-counter-num {
		font-size: 24rpx;
	}

	.mypic-counter-num .big {
		font-size: 60rpx;
		font-weight: bold;
	}

	.service-btn {
		width: 200rpx;
		height: 60rpx;
		border-radius: 50rpx;
		border: 1px #b3b3b3 solid;
		text-align: center;
		line-height: 60rpx;
		font-size: 28rpx;
		color: #333;
	}

	.popp {
		width: 600rpx;
		height: 500rpx;
		padding: 30rpx;
		background-color: #fff;
		position: fixed;
		top: 50%;
		left: 50%;
		margin-top: -250rpx;
		margin-left: -300rpx;
		z-index: 90;
	}

	.close {
		width: 54rpx;
		height: 54rpx;
		position: absolute;
		bottom: -113rpx;
		left: 50%;
		margin-left: -27rpx;
	}

	.title {
		margin-bottom: 30rpx;
		text-align: center;
	}

	.title-bar {
		width: 87rpx;
		height: 10rpx;
		margin: 0 auto 10rpx;
		background-color: #000;
	}

	.title-h {
		font-size: 32rpx;
		font-weight: bold;
	}

	.title-p {
		font-size: 20rpx;
		color: #999;
	}

	.entry {
		margin-bottom: 40rpx;
		text-align: center;
	}

	.entry-p {
		margin-bottom: 10rpx;
		font-size: 24rpx;
		color: #999;
	}

	.entry-txt {
		width: 100%;
		height: 80rpx;
		margin-bottom: 25rpx;
		border-radius: 50rpx;
		background-color: #f2f2f2;
		font-size: 34rpx;
		text-align: center;
	}

	.entry-tips {
		font-size: 24rpx;
		color: #f00;
	}

	.entry-link {
		display: inline-block;
		text-decoration: underline;
		display: inline-block;
		text-decoration: underline;
		background-color: #ffffff;
		font-size: 11px;
		color: #f00f00;
		line-height: 12px;
		padding-left: 0px;
		padding-top: 4px;
	}

	.contact-now {
		width: 100%;
		height: 85rpx;
		border-radius: 50rpx;
		background-color: #f7d031;
		box-shadow: 0 10rpx 10rpx rgba(247, 208, 49, .5);
		text-align: center;
		line-height: 85rpx;
		font-size: 32rpx;
	}

	button {
		border: none;
	}

	button::after {
		border: none;
	}
</style>
